<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>typing.js demo</title>
  <link rel="stylesheet" href="bootstrap.min.css">
  <link rel="stylesheet" href="bootstrap-theme.min.css">
  <link rel="stylesheet" href="../typing.css">
  <link rel="stylesheet" href="demo.css">
  <script src="../typing.js"></script>
</head>
<body>
  <div class="container-fluid">
    <div class="row">
      <div class="col-lg-6">
        <div id="source">
          <h1 class="text-center">typing.js <small>最牛的打字效果插件</small></h1>
          <p class="lead">
            能够完美的体现整个打字过程，并完整的拷贝展示原有数据的呈现效果。<br />
            这里使用<a href="http://getbootstrap.com/" target="_blank">bootstrap</a>来演示效果
          </p>
          <h3>高亮文字</h3>
          <p>You can use the mark tag to <mark>highlight</mark> text.</p>
          <h3>删除文本</h3>
          <p><del>This line of text is meant to be treated as deleted text.</del></p>
          <h3>对齐</h3>
          <p class="text-left">Left aligned text.</p>
          <p class="text-center">Center aligned text.</p>
          <p class="text-right">Right aligned text.</p>
          <p class="text-justify">Justified text.</p>
          <p class="text-nowrap">No wrap text.</p>
          <h3>引用文本</h3>
          <blockquote>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
            <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
          </blockquote>
          <h3>列表</h3>
          <ul>
            <li>Lorem ipsum dolor sit amet</li>
            <li>Nulla volutpat aliquam velit
              <ul>
                <li>Phasellus iaculis neque</li>
                <li>Purus sodales ultricies</li>
              </ul>
            </li>
            <li>Eget porttitor lorem</li>
          </ul>
          <h3>按钮</h3>
          <div>
            <button type="button" class="btn btn-default">Default</button>
            <button type="button" class="btn btn-primary">Primary</button>
            <button type="button" class="btn btn-success">Success</button>
            <button type="button" class="btn btn-info">Info</button>
            <button type="button" class="btn btn-warning">Warning</button>
            <button type="button" class="btn btn-danger">Danger</button>
            <button type="button" class="btn btn-link">Link</button>
          </div>
          <h3>图片</h3>
          <div>
            <img data-src="holder.js/140x140" class="img-rounded" alt="140x140" src="" style="width: 140px; height: 140px;">
            <img data-src="holder.js/140x140" class="img-circle" alt="140x140" src="" style="width: 140px; height: 140px;">
            <img data-src="holder.js/140x140" class="img-thumbnail" alt="140x140" src="" style="width: 140px; height: 140px;">
          </div>
          <h3>表格</h3>
          <table class="table table-bordered">
            <thead><tr><th>#</th><th>First Name</th><th>Last Name</th><th>Username</th></tr></thead>
            <tbody>
              <tr><td rowspan="2">1</td><td>Mark</td><td>Otto</td><td>@mdo</td></tr>
              <tr><td>Mark</td><td>Otto</td><td>@TwBootstrap</td></tr>
              <tr><td>2</td><td>Jacob</td><td>Thornton</td><td>@fat</td></tr>
              <tr><td>3</td><td colspan="2">Larry the Bird</td><td>@twitter</td></tr>
            </tbody>
          </table>
          <h3>表单</h3>
          <form class="form-horizontal" role="form">
            <div class="form-group">
              <label for="inputEmail3" class="col-sm-2 control-label">Email</label>
              <div class="col-sm-10"><input type="email" class="form-control" id="inputEmail3" placeholder="Email"></div>
            </div>
            <div class="form-group">
              <label for="inputPassword3" class="col-sm-2 control-label">Password</label>
              <div class="col-sm-10"><input type="password" class="form-control" id="inputPassword3" placeholder="Password"></div>
            </div>
            <div class="form-group">
              <label class="col-sm-2 control-label">Type</label>
              <div class="col-sm-10"><select class="form-control"><option>1</option><option>2</option><option>3</option> <option>4</option><option>5</option></select></div>
            </div>
            <div class="form-group">
              <div class="col-sm-offset-2 col-sm-10">
                <div class="checkbox"><label><input type="checkbox"> Remember me </label></div>
              </div>
            </div>
            <div class="form-group">
              <div class="col-sm-offset-2 col-sm-10"><button type="submit" class="btn btn-default">Sign in</button>
              </div>
            </div>
          </form>
        </div>
      </div>
      <div class="col-lg-6">
        <div id="output">
        </div>
      </div>
    </div>
  </div>

  <script type="text/javascript">
    var typing = new Typing({
      source: document.getElementById('source'),
      output: document.getElementById('output'),
      delay: 60
    });
    typing.start();
  </script>

</body>
</html>
